<template>
  <div>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="$t('config.agent.bacthEditAgent')" :visible.sync="dialogVisible" @close="close"
               width="50%">
      <p class="bacthTip">{{$t('config.agent.bacthEditAgentTip', {total: total})}}</p>
      <el-form :model="form" ref="form" label-position="top" label-width="80px">
        <affix :label="$t('agentSetting.agentSetting11')"></affix>
        <el-radio-group v-model="radio2">
          <el-radio :label="3">{{$t('agentSetting.agentSetting13')}}</el-radio>
          <el-radio :label="6">{{$t('agentSetting.agentSetting14')}}</el-radio>
        </el-radio-group>
        <!-- 角色组件 -->
        <el-form-item :label="$t('config.agent.modifyRole')" prop="role">
          <role-transfer-new
            :rolesId = "rolesId"
            ref = "roleChild">
          </role-transfer-new>
        </el-form-item>
        <el-form-item class="search">
          <el-button class = "primary_btn"
                     @click="close">{{$t('public.cancel')}}</el-button>
          <el-button type="primary"
                     @click="onSubmit('role')"
                     class = "primary_btn">{{$t('public.save')}}</el-button>
        </el-form-item>
        <affix :label ="$t('agentSetting.agentSetting15')"></affix>
        <el-form-item :label="$t('config.agent.imAgentStatusInit')">
          <el-radio class="radio" v-model="form.imClaimStatus" :label="'open'">{{$t('config.agent.onlineStatus')}}</el-radio>
          <el-radio class="radio" v-model="form.imClaimStatus" :label="'close'">{{$t('config.agent.busyStatus')}}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('config.agent.minImDealCount')">
          <el-select v-model="form.minImDealCount" size="mini">
            <el-option
              v-for="item in minNumber"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('config.agent.maxImDealCount')">
          <el-select v-model="form.maxImDealCount" size="mini">
            <el-option
              v-for="item in maxNumber"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="search">
          <el-button class = "primary_btn"
                     @click="close">{{$t('public.cancel')}}</el-button>
          <el-button type="primary"
                     @click="onSubmit('imDealCount')"
                     class = "primary_btn">{{$t('public.save')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import AgentSelect from '@/components/public-modules/cache/AgentSelect'
  import RoleTransferNew from '@/components/public-modules/cache/RoleTransferNew'
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'BacthEditAgentInfo',
    data () {
      return {
        radio2: 3,
        dialogVisible: false,
        rolesId: [],
        minNumber: [],
        maxNumber: [],
        customize: [],
        depts: [{
          label: this.$t('public.pleasePick1'),
          value: ''
        }],
        form: {
          minImDealCount: '1',
          maxImDealCount: '1',
          imClaimStatus: 'open'
        },
        form1: {}
      }
    },
    props: {
      total: Number
    },
    watch: {
    },
    methods: {
      open1 () {
        this.dialogVisible = true
        this.form = {
          status: 'enable',
          imClaimStatus: 'open',
          minImDealCount: '1',
          maxImDealCount: '1',
          role: [],
          roleType: 3
        }
      },
      batchCancelWechatHelperBind () {
        let text = this.$t('agentSetting.agentSetting22')
        this.$confirm(text, this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          type: 'warning',
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn'
        })
          .then(() => {
            let data = {
              query: deepClone(this.$store.state.config.agentConfig.queryAgent)
            }
            delete data.query.page
            delete data.query.limit
            this.$emit('batchCancelWechatHelperBind', data)
          })
      },
      eeroTip (msg) {
        this.$message.error(msg)
      },
      onSubmit (type) {
        let data = {
          query: deepClone(this.$store.state.config.agentConfig.queryAgent),
          set: {
            flag: type
          },
          total: this.total
        }
        delete data.query.page
        delete data.query.limit
        if (type === 'role') {
          if (this.$refs.roleChild.selected.length === 0) {
            this.eeroTip(this.$t('config.agent.pleaseRole'))
            return
          }
          data.set.role = this.$refs.roleChild.selected
          if (this.radio2 === 3) {
            data.set.flag = 'roleAdd'
          } else {
            data.set.flag = 'role'
          }
        } else if (type === 'imDealCount') {
          if (parseInt(this.form.minImDealCount) > parseInt(this.form.maxImDealCount)) {
            this.eeroTip(this.$t('config.agent.imDealErroTip'))
            return
          }
          data.set.minImDealCount = this.form.minImDealCount
          data.set.maxImDealCount = this.form.maxImDealCount
          data.set.imClaimStatus = this.form.imClaimStatus
        }
        this.$emit('BacthEditAgentInfo', data)
        // console.log(data)
      },
      // 初始化批量修改条件
      init () {
        this.radio2 = 3
        this.form.minImDealCount = '1'
        this.form.maxImDealCount = '1'
        this.form.imClaimStatus = 'open'
        this.$refs.roleChild.selected = []
      },
      // 关闭批量修改dialog
      close () {
        this.dialogVisible = false
        this.$emit('close')
        this.init()
      },
      // 初始化批量修改条件
      open () {
        this.dialogVisible = true
      },
      // 循环座席能同时接待会话数
      forNumber (num, obj) {
        for (let i = 1; i < num + 1; i++) {
          obj.push({
            label: i + '',
            value: i + ''
          })
        }
      }
    },
    components: {
      affix,
      AgentSelect,
      RoleTransferNew
    },
    beforeMount () {
      this.forNumber(200, this.maxNumber)
      this.forNumber(50, this.minNumber)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  select
    margin-top 10px
    width 100%
    height 120px
  .unbind
    color $c-email
    cursor pointer
  .el-select
    width 70%
    .el-input
      width 100%
  .el-input
    width 70%
  .bacthTip
    color $c-prompt
  .el-form-item
    margin-top 10px
    padding-left 20px
  .ui-affix
    margin-top 36px
    padding-bottom 0
  .search
    text-align center
    margin-top 20px
</style>
